<template>
  <div>
    <!-- 配置列面板 -->
    <transition name="fade">
      <div class="columnOption">
        <div class="content">
          <div class="head">选择显示字段</div>
          <div class="body">
            <el-col :xs="24" :sm="24" :md="12" :lg="3">
              <el-checkbox v-model="checkList.proNewId">采购-上新记录ID</el-checkbox>
              <el-checkbox v-model="checkList.productNo">采购-货号</el-checkbox>
              <el-checkbox v-model="checkList.picUrl">采购-产品图片</el-checkbox>
              <el-checkbox v-model="checkList.colorProperty">采购-颜色属性</el-checkbox>
              <el-checkbox v-model="checkList.procureRemark">采购-备注</el-checkbox>
              <el-checkbox v-model="checkList.proNewSizeList">采购-可选尺码</el-checkbox>
              <el-checkbox v-model="checkList.orderTime">采购-确认下单时间</el-checkbox>
              <el-checkbox v-model="checkList.manufacturerCode">采购-生产厂家</el-checkbox>
              <el-checkbox v-model="checkList.procureWeavingPeriod">采购-织坯期(天)</el-checkbox>
              <el-checkbox v-model="checkList.procureStainPeriod">采购-染色期(天)</el-checkbox>
              <el-checkbox v-model="checkList.workshopCycle">采购-车间生产周期</el-checkbox>
              <el-checkbox v-model="checkList.shippingTime">采购-出货时间</el-checkbox>
              <el-checkbox v-model="checkList.logoUrl">采购-logo图片</el-checkbox>
              <el-checkbox v-model="checkList.logoPosition">采购-logo位置</el-checkbox>
              <el-checkbox v-model="checkList.purchasingAccessoriesMark">采购-修改备注</el-checkbox>
              <el-checkbox v-model="checkList.purchasingBeforePicurl">采购-辅料修改前图片</el-checkbox>
              <el-checkbox v-model="checkList.purchasingAfterPicurl">采购-辅料修改后图片</el-checkbox>
              <el-checkbox v-model="checkList.purchasingReportAttachments">采购-质检报告</el-checkbox>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="3">
              <el-checkbox v-model="checkList.merchandiseBrand">商品-品牌信息</el-checkbox>
              <el-checkbox v-model="checkList.productSeason">商品-季节</el-checkbox>
              <el-checkbox v-model="checkList.operationMainProducts">商品-主推款</el-checkbox>
              <el-checkbox v-model="checkList.merchandiseSalePrice">商品-销售价格</el-checkbox>
              <el-checkbox v-model="checkList.merchandiseTagPrice">商品-吊牌价格</el-checkbox>
              <el-checkbox v-model="checkList.firstLevelColumn">商品-一级类目</el-checkbox>
              <el-checkbox v-model="checkList.firstLevelExtendedColumn">商品-二级类目</el-checkbox>
              <el-checkbox v-model="checkList.secondLevelColumn">商品-三级类目</el-checkbox>
              <el-checkbox v-model="checkList.newTime">商品-上架时间</el-checkbox>
              <el-checkbox v-model="checkList.newTimeMark">商品-上架时间备注</el-checkbox>
              <el-checkbox v-model="checkList.channelList">商品-上新渠道</el-checkbox>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="3">
              <el-checkbox v-model="checkList.operationLevel">运营-层级</el-checkbox>
              <el-checkbox v-model="checkList.operationMainColor">运营-主色/辅色</el-checkbox>
              <el-checkbox v-model="checkList.operationPlanTime">运营-计划上架时间</el-checkbox>
              <el-checkbox v-model="checkList.operationalRemarks">运营-备注</el-checkbox>
              <el-checkbox v-model="checkList.operationPreviewPlanTime">运营-预览时间</el-checkbox>
              <el-checkbox v-model="checkList.operationJingdongUploaded">运营-京东-是否上架</el-checkbox>

              <el-checkbox v-model="checkList.operationJingdongMain">运营-京东-主推款</el-checkbox>
              <el-checkbox v-model="checkList.operationChannlLink">运营-渠道链接</el-checkbox>
              <el-checkbox v-model="checkList.operationMainSelling">运营-主图卖点提炼</el-checkbox>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="3">
              <el-checkbox v-model="checkList.visionShootingPlan">摄影-计划拍摄时间</el-checkbox>
              <el-checkbox v-model="checkList.visionShootingPlanMark">摄影-完成拍摄时间</el-checkbox>
              <el-checkbox v-model="checkList.photographyPlane">摄影-是否拍摄平面</el-checkbox>
              <el-checkbox v-model="checkList.photographyVideo">摄影-是否拍摄视频</el-checkbox>
              <el-checkbox v-model="checkList.photographyVideoEditing">摄影-视频剪辑进度</el-checkbox>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="3">
              <el-checkbox v-model="checkList.designDesigners">设计-设计师</el-checkbox>

              <el-checkbox v-model="checkList.designSeries">设计-系列</el-checkbox>
              <el-checkbox v-model="checkList.mainScene">设计-主题</el-checkbox>
              <el-checkbox v-model="checkList.designSpecialCases">设计-样品特殊情况</el-checkbox>
              <el-checkbox v-model="checkList.designSpecialCasesPic">样品特殊情况(图片)</el-checkbox>
              <el-checkbox v-model="checkList.designMatchingNumber">设计-搭配(货号)</el-checkbox>
              <el-checkbox v-model="checkList.designMatchingPicture">设计-搭配(图片)</el-checkbox>
              <el-checkbox v-model="checkList.designRecommendNumber">设计-其他搭配货号</el-checkbox>
              <el-checkbox v-model="checkList.designRecommendPicture">设计-其他搭配图片</el-checkbox>
              <el-checkbox v-model="checkList.designScene">设计-场景名</el-checkbox>
              <el-checkbox v-model="checkList.designShootingScene">设计-拍摄场景建议</el-checkbox>
              <el-checkbox v-model="checkList.designShootingSample">设计-拍摄样板进度</el-checkbox>
              <el-checkbox v-model="checkList.designTraining">设计-培训</el-checkbox>

              <el-checkbox v-model="checkList.fabricComposition">采购-面料成分</el-checkbox>
              <el-checkbox v-model="checkList.designFabricFunction">设计-面料功能</el-checkbox>
              <el-checkbox v-model="checkList.designFabricName">设计-面料名称</el-checkbox>
              <!-- <el-checkbox v-model="checkList.designProductCategories">设计-产品分类</el-checkbox> -->
              <el-checkbox v-model="checkList.designChestPad">设计-胸垫/裤裆</el-checkbox>
              <el-checkbox v-model="checkList.designShockproofDegree">设计-防震程度/腰高</el-checkbox>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="3">
              <el-checkbox v-model="checkList.designGatheringDegree">设计-聚拢程度</el-checkbox>
              <el-checkbox v-model="checkList.designLiningMaterial">设计-里料材质</el-checkbox>
              <el-checkbox v-model="checkList.designRecommendedSizes">设计-建议尺码</el-checkbox>
              <el-checkbox v-model="checkList.designSize">设计-尺码</el-checkbox>
              <el-checkbox v-model="checkList.designSpecialFabric">设计-特殊面料信息</el-checkbox>
              <el-checkbox v-model="checkList.designSpecialPresentation">设计-特别呈现卖点</el-checkbox>
              <el-checkbox v-model="checkList.designPropertyCategory">设计-属性类别</el-checkbox>
              <el-checkbox v-model="checkList.designFitCup">设计-版型/罩杯</el-checkbox>
              <el-checkbox v-model="checkList.designSuitableBody">设计-适合体型</el-checkbox>
              <el-checkbox v-model="checkList.designGarmentTrouser">设计-衣长/裤长</el-checkbox>
              <el-checkbox v-model="checkList.designExerciseIntensity">设计-运动强度</el-checkbox>
              <el-checkbox v-model="checkList.designFlexibility">设计-弹性</el-checkbox>
              <el-checkbox v-model="checkList.designFitnessLevels">设计-健身层级</el-checkbox>
              <el-checkbox v-model="checkList.designSomatosensory">设计-体感</el-checkbox>
              <el-checkbox v-model="checkList.designSoftness">设计-柔软度</el-checkbox>
              <el-checkbox v-model="checkList.designFabricThickness">设计-面料厚度</el-checkbox>

              <el-checkbox v-model="checkList.designBreathability">设计-透气度</el-checkbox>
              <el-checkbox v-model="checkList.fabricTestRepor">设计-面料检测报告</el-checkbox>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="3">
              <el-checkbox v-model="checkList.copywritingDetailPage">文案-精细化详情页</el-checkbox>
              <el-checkbox v-model="checkList.copywritingFunctionDisplay">文案-功能展示</el-checkbox>
              <el-checkbox v-model="checkList.copywritingDetailShow">文案-细节展示</el-checkbox>
              <el-checkbox v-model="checkList.copywritingDesignPrinciple">文案-设计原理</el-checkbox>
              <el-checkbox v-model="checkList.copywritingPosterCopy">文案-海报文案</el-checkbox>

              <el-checkbox v-model="checkList.copywritingMainSelling">文案-精细化主图卖点</el-checkbox>
              <el-checkbox v-model="checkList.copywritingVideo">文案-视频文案</el-checkbox>
              <el-checkbox v-model="checkList.copywritingFamily">文案-家族分类</el-checkbox>
              <el-checkbox v-model="checkList.copywritingFabricName">文案-面料昵称</el-checkbox>
              <el-checkbox v-model="checkList.copywritingNickname">文案-小别名</el-checkbox>
            </el-col>

            <el-col :xs="24" :sm="24" :md="12" :lg="3">
              <el-checkbox v-model="checkList.visionShooting3d">视觉-是否拍3D图</el-checkbox>
              <el-checkbox v-model="checkList.visionRetouchingProgress">视觉-修图进度</el-checkbox>
              <el-checkbox v-model="checkList.visionPic">视觉-图片路径</el-checkbox>
            </el-col>

            <!-- <el-checkbox v-model="checkList.merchandise">商品部</el-checkbox>
                        <el-checkbox v-model="checkList.operation">运营部</el-checkbox>
                        <el-checkbox v-model="checkList.vision">视觉部</el-checkbox>
                        <el-checkbox v-model="checkList.design">设计部</el-checkbox>
                        <el-checkbox v-model="checkList.copywriting">新媒体部</el-checkbox>
                        <el-checkbox v-model="checkList.shot">摄影部</el-checkbox>
                        <el-checkbox v-model="checkList.customer">客服部</el-checkbox> -->

            <!-- <el-checkbox v-model="checkList.date" disabled>日期</el-checkbox>
            <el-checkbox v-model="checkList.name">姓名</el-checkbox>
            <el-checkbox v-model="checkList.provinces">省份</el-checkbox>
            <el-checkbox v-model="checkList.city">市区</el-checkbox>
            <el-checkbox v-model="checkList.adreess">地址</el-checkbox>
            <el-checkbox v-model="checkList.zipCode">邮编</el-checkbox> :page-sizes="[10]"-->
          </div>
          <div class="footer">
            <el-button @click="checkAll">一键全选</el-button>
            <el-button size="small" type="primary" plain @click="saveColumn" style="margin-left: 30px">保存列配置</el-button>
            <el-button @click="cancel" style="margin-left: 30px">返回上一级</el-button>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>  
<script>
export default {
  data() {
    return {
      li: false,
      // 列的配置化对象，存储配置信息
      checkList: {},
      showColumn: {
        proNewId: true,
        merchandiseBrand: true,
        productNo: true,
        picUrl: true,
        colorProperty: true,
        procureRemark: true,
        operationMainProducts: true,
        operationLevel: true,
        operationMainColor: true,
        merchandiseSalePrice: true,
        merchandiseTagPrice: true,
        firstLevelColumn: true,
        secondLevelColumn: true,
        proNewSizeList: true,
        orderNum: true,
        orderTime: true,
        manufacturerCode: true,
        procureWeavingPeriod: true,
        procureStainPeriod: true,
        workshopCycle: true,
        shippingTime: true,
        visionShootingPlan: true,
        visionShootingPlanMark: true,
        designDesigners: true,
        designSeries: true,
        mainScene: true,
        designSpecialCases: true,
        designSpecialCasesPic: true,
        designMatchingNumber: true,
        designMatchingPicture: true,
        designRecommendNumber: true,
        designRecommendPicture: true,
        designScene: true,
        designShootingScene: true,
        designShootingSample: true,
        designTraining: true,
        logoUrl: true,
        logoPosition: true,
        fabricComposition: true,
        designFabricFunction: true,
        designFabricName: true,
        designProductCategories: true,
        designChestPad: true,
        designShockproofDegree: true,
        designGatheringDegree: true,
        designLiningMaterial: true,
        designRecommendedSizes: true,
        designSize: true,

        designSpecialFabric: true,
        designSpecialPresentation: true,
        copywritingDetailPage: true,
        copywritingFunctionDisplay: true,
        copywritingDetailShow: true,
        copywritingDesignPrinciple: true,
        copywritingPosterCopy: true,
        operationMainSelling: true,
        copywritingMainSelling: true,
        copywritingVideo: true,
        copywritingFamily: true,
        copywritingFabricName: true,
        copywritingNickname: true,
        photographyPlane: true,
        photographyVideo: true,
        visionShooting3d: true,
        visionRetouchingProgress: true,
        photographyVideoEditing: true,
        newTime: true,
        newTimeMark: true,
        channelList: true,
        operationPlanTime: true,
        operationPreviewPlanTime: true,
        operationJingdongUploaded: true,
        operationJingdongMain: true,
        designPropertyCategory: true,
        designFitCup: true,
        designSuitableBody: true,
        designGarmentTrouser: true,
        designExerciseIntensity: true,
        designFlexibility: true,
        designFitnessLevels: true,
        designSomatosensory: true,
        designSoftness: true,
        designFabricThickness: true,
        designBreathability: true,
        purchasingAccessoriesMark: true,
        purchasingBeforePicurl: true,
        purchasingAfterPicurl: true,
        visionPic: true,
        operationChannlLink: true,
        purchasingReportAttachments: true,
        fabricTestRepor: true,
      },
    };
  },
  watch: {
    // 监听复选框配置列所有的变化
    checkList: {
      handler: function (newnew, oldold) {
        // console.log(newnew);
        this.showColumn = newnew;
        // 这里需要让表格重新绘制一下，否则会产生固定列错位的情况
        // console.log(new Date());
        // this.$nextTick(() => {
        //     this.$refs.table.doLayout();
        //     // console.log('渲染完成时间', new Date());
        // });
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    // 发请求得到checkListInitData的列的名字
    if (localStorage.getItem("columnSet")) {
      this.checkList = JSON.parse(localStorage.getItem("columnSet"));
    } else {
      this.checkList = {
        proNewId: true,
        merchandiseBrand: true,
        productNo: true,
        picUrl: true,
        colorProperty: true,
        procureRemark: true,
        operationMainProducts: true,
        operationLevel: true,
        operationMainColor: true,
        merchandiseSalePrice: true,
        merchandiseTagPrice: true,
        firstLevelColumn: true,
        secondLevelColumn: true,
        proNewSizeList: true,
        orderNum: true,
        orderTime: true,
        manufacturerCode: true,
        procureWeavingPeriod: true,
        procureStainPeriod: true,
        workshopCycle: true,
        shippingTime: true,
        visionShootingPlan: true,
        visionShootingPlanMark: true,
        designDesigners: true,
        designSeries: true,
        mainScene: true,
        designSpecialCases: true,
        designSpecialCasesPic: true,
        designMatchingNumber: true,
        designMatchingPicture: true,
        designRecommendNumber: true,
        designRecommendPicture: true,
        designScene: true,
        designShootingScene: true,
        designShootingSample: true,
        designTraining: true,
        logoUrl: true,
        logoPosition: true,
        fabricComposition: true,
        designFabricFunction: true,
        designFabricName: true,
        designProductCategories: true,
        designChestPad: true,
        designShockproofDegree: true,
        designGatheringDegree: true,
        designLiningMaterial: true,
        designRecommendedSizes: true,
        designSize: true,

        designSpecialFabric: true,
        designSpecialPresentation: true,
        copywritingDetailPage: true,
        copywritingFunctionDisplay: true,
        copywritingDetailShow: true,
        copywritingDesignPrinciple: true,
        copywritingPosterCopy: true,
        operationMainSelling: true,
        copywritingMainSelling: true,
        copywritingVideo: true,
        copywritingFamily: true,
        copywritingFabricName: true,
        copywritingNickname: true,
        photographyPlane: true,
        photographyVideo: true,
        visionShooting3d: true,
        visionRetouchingProgress: true,
        photographyVideoEditing: true,
        newTime: true,
        newTimeMark: true,
        channelList: true,
        operationPlanTime: true,
        operationPreviewPlanTime: true,
        operationJingdongUploaded: true,
        operationJingdongMain: true,
        designPropertyCategory: true,
        designFitCup: true,
        designSuitableBody: true,
        designGarmentTrouser: true,
        designExerciseIntensity: true,
        designFlexibility: true,
        designFitnessLevels: true,
        designSomatosensory: true,
        designSoftness: true,
        designFabricThickness: true,
        designBreathability: true,
        purchasingAccessoriesMark: true,
        purchasingBeforePicurl: true,
        purchasingAfterPicurl: true,
        visionPic: true,
        operationChannlLink: true,
        purchasingReportAttachments: true,
        fabricTestRepor: true,
        // date: true,
        // name: true,
        // provinces: true,
        // city: true,
        // adreess: true,
        // zipCode: true,
        // purchase: true,
        // merchandise: true,
        // operation: true,
        // vision: true,
        // design: true,
        // copywriting: true,
        // shot: true,
        // customer: true
      };
    }
  },
  methods: {
    checkAll() {
      var category = this.$options.data().showColumn;
      console.log(JSON.stringify(category));
      if (this.li) {
        for (var key in category) {
          category[key] = false;
        }
        this.li = false;
      } else {
        for (var key in category) {
          category[key] = true;
        }
        this.li = true;
      }

      console.log(JSON.stringify(category));
      this.checkList = category;
      localStorage.setItem("columnSet", JSON.stringify(category));
    },
    saveColumn() {
      localStorage.setItem("columnSet", JSON.stringify(this.checkList));
      // this.isShowColumn = false;
    },
    // 取消按钮
    cancel() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="scss" scoped>
span.textname {
  display: -webkit-box;

  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: pre-wrap;
}

.el-input.is-disabled ::v-deep .el-input__inner {
  color: #606266;
  background-color: white;
  border: none;
}

.el-textarea.is-disabled ::v-deep .el-textarea__inner {
  color: #606266;
  background-color: white;
  border: none;
  width: 500px;
  resize: none;
  cursor: pointer;
}

.left el-tree-node__content {
  padding-left: 15px !important;
  height: 56px;
}

.left .el-tree-node__children {
  .el-tree-node__content {
    padding-left: 30px !important;
  }
}

// .el-checkbox__inner {
//     display: inline-block;
//     z-index: -1;
// }  .el-checkbox__inner

::v-deep el-checkbox {
  display: none !important;

  z-index: -1;
}

/* 1. 去除Elment-plus框架自带样式边框;2 .保证选中后高度不变 */
::deep() .el-checkbox__inner::after {
  border: none;
  width: 100%;
  height: 100%;
}

.leftStyle {
  position: absolute;
  left: -200px;
  top: 1px;
  font-size: 12px;

  // opacity: 0;
  // clear: both;
  // overflow: hidden;
}

#appStyle {
  position: relative;
  top: 50px;
  left: 250px;
  width: 60%;

  // clear: both;
}

.container {
  white-space: nowrap;
  overflow: hidden;
  overflow-x: scroll;
  -webkit-backface-visibility: hidden;
  -webkit-overflow-scrolling: touch;
}

.columnOption {
  // position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: row-reverse;
  align-items: center;

  .content {
    width: 100%;
    height: 60%;
    background-color: #f5f7fa;

    // background-color: rgb(203, 223, 198);

    .head {
      width: 100%;
      height: 44px;
      border-bottom: 1px solid #000;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 12px;
    }

    .body {
      width: 100%;
      height: calc(100% - 88px);
      box-sizing: border-box;
      padding-top: 10px;
      overflow-y: auto;
      padding-left: 50px;
      // display: flex;
      // flex-direction: row;
      /* 平分剩余空间 */
      // justify-content: space-around;

      .items {
        width: 100%;
        height: 100%;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        // justify-content:s;
        /* 平分剩余空间 */
        justify-content: space-around;

        .el-checkbox {
          width: 100%;
          height: 28px;
          line-height: 28px;
          margin-bottom: 14px;
          display: inline-block;
          font-family: PingFang SC;
          font-style: normal;
          font-weight: normal;
          font-size: 14px;
          color: #000;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          box-sizing: border-box;
          padding-left: 14px;
        }

        .el-checkbox:hover {
          background-color: #f5f7fa;
        }
      }
    }

    .footer {
      width: 100%;
      height: 44px;
      border-top: 1px solid #000;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}

// 控制淡入淡出效果
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
